<template>
<div class="battle">
    <div class="page">
      <div class="flex solid-bottom padding justify-between">
      <img class="userinfo-avatar"  :src="avatarUrl" background-size="cover"/>
      <img class="userinfo-avatar"  src="/static/images/robotAvatar.jpg" background-size="cover"/>
      </div>
      <div class="weui-progress">
        <div class="weui-progress__bar">
          <progress :percent='progress' stroke-width="5" :show-info = 'false' activeColor="#6A5ACD" backgroundColor="#D8BFD8"/>
          <p class="time">{{restTime}}S</p>
        </div>
      </div>
    </div>
    <div class="scoreFrame">
        <div class="score1">{{score1}}</div>
        <div class="score2">{{score2}}</div>
    </div>
    <div class="flex solid-bottom padding justify-center">
      <div class="padding-sm margin-xs text-sl radius" :style="'color:white'">{{list2[index].question}}</div>
    </div>
    <div class="padding flex flex-direction">
        <button :style='style1' class="cu-btn round lg" @click="clickAnwser1">{{list2[index].answer[0]}}</button>
        <button :style='style2' class="cu-btn round lg" @click="clickAnwser2">{{list2[index].answer[1]}}</button>
        <button :style='style3' class="cu-btn round lg" @click="clickAnwser3">{{list2[index].answer[2]}}</button>
        <button :style='style4' class="cu-btn round lg" @click="clickAnwser4">{{list2[index].answer[3]}}</button>
    </div>
</div>
</template>

<script>

export default {
  data () {
    return {
      nickName: '',
      avatarUrl: '',
      counterUrl: '',
      counterChoice: '',
      style1: 'background-color:#eee',
      style2: 'background-color:#eee',
      style3: 'background-color:#eee',
      style4: 'background-color:#eee',
      count: 0,
      index: 0,
      index0: 0,
      answerIndex: 0,
      score1: 0,
      score2: 0,
      list2: [{
        question: '100+200=?',
        answer: ['200', '300', '400', '500'],
        rightIndex: 1
      }, {
        question: '150+200=?',
        answer: ['200', '300', '400', '350'],
        rightIndex: 3
      }, {
        question: '200÷4=?',
        answer: ['50', '40', '20', '24'],
        rightIndex: 0
      }, {
        question: '30×7=?',
        answer: ['170', '210', '310', '350'],
        rightIndex: 1
      }, {
        question: '724+116=?',
        answer: ['940', '850', '740', '840'],
        rightIndex: 3
      }, {
        question: '30×24=?',
        answer: ['720', '620', '740', '640'],
        rightIndex: 0
      }, {
        question: '25-10=?',
        answer: ['5', '10', '15', '20'],
        rightIndex: 2
      }],
      progress: 100,
      restTime: 10,
      choice: '',
      counterIsTrue: false,
      isTrue: false,
      isClicked: false,
      isFinished: false,
      useless: ''
    }
  },
  mounted () {
    this.upload()
  },
  methods: {
    clickAnwser1 () {
      var _this = this
      if (!this.isClicked) {
        console.log('点击答案：' + this.list2[this.index].answer[0])
        this.answerIndex = 0
        if (this.answerIndex === this.list2[this.index].rightIndex) {
          this.style1 = 'background-color:PaleGreen'
          this.isTrue = true
          this.score1 += parseInt(100 * (this.restTime / 10))
        } else {
          this.style1 = 'background-color:red'
        }
        setTimeout(function () {
          _this.getRandomChoice()
        }, 800)
        this.isClicked = true
        setTimeout(function () {
          _this.useless = 'used'
        }, 1000)
        setTimeout(function () {
          _this.isFinished = true
        }, 1000)
      }
    },
    clickAnwser2 () {
      var _this = this
      if (!this.isClicked) {
        console.log('点击答案：' + this.list2[this.index].answer[1])
        this.answerIndex = 1
        if (this.answerIndex === this.list2[this.index].rightIndex) {
          this.style2 = 'background-color:PaleGreen'
          this.isTrue = true
          this.score1 += parseInt(100 * (this.restTime / 10))
        } else {
          this.style2 = 'background-color:red'
        }
        setTimeout(function () {
          _this.getRandomChoice()
        }, 800)
        this.isClicked = true
        setTimeout(function () {
          _this.useless = 'used'
        }, 1000)
        setTimeout(function () {
          _this.isFinished = true
        }, 1000)
      }
    },
    clickAnwser3 () {
      var _this = this
      if (!this.isClicked) {
        console.log('点击答案：' + this.list2[this.index].answer[2])
        this.answerIndex = 2
        if (this.answerIndex === this.list2[this.index].rightIndex) {
          this.style3 = 'background-color:PaleGreen'
          this.isTrue = true
          this.score1 += parseInt(100 * (this.restTime / 10))
        } else {
          this.style3 = 'background-color:red'
        }
        setTimeout(function () {
          _this.getRandomChoice()
        }, 800)
        this.isClicked = true
        setTimeout(function () {
          _this.useless = 'used'
        }, 1000)
        setTimeout(function () {
          _this.isFinished = true
        }, 1000)
      }
    },
    clickAnwser4 () {
      var _this = this
      if (!this.isClicked) {
        console.log('点击答案：' + this.list2[this.index].answer[3])
        this.answerIndex = 3
        if (this.answerIndex === this.list2[this.index].rightIndex) {
          this.style4 = 'background-color:PaleGreen'
          this.isTrue = true
          this.score1 += parseInt(100 * (this.restTime / 10))
        } else {
          this.style4 = 'background-color:red'
        }
        setTimeout(function () {
          _this.getRandomChoice()
        }, 800)
        this.isClicked = true
        setTimeout(function () {
          _this.useless = 'used'
        }, 1000)
        setTimeout(function () {
          _this.isFinished = true
        }, 1000)
      }
    },
    upload () {
      this.progress = 100
      this.isClicked = false
      this.isFinished = false
      this.style1 = 'background-color:#eee'
      this.style2 = 'background-color:#eee'
      this.style3 = 'background-color:#eee'
      this.style4 = 'background-color:#eee'
      this.choice = ''
      this.counterChoice = ''
      this._next()
    },
    _next () {
      var _this = this
      if (_this.progress <= 0 || _this.isFinished) {
        if (_this.index === 6) {
          _this.sendFinish()
          var roUrl = '/static/images/robotAvatar.jpg'
          const url = '../finish/main?nickName=' + this.nickName + '&avatarUrl=' + this.avatarUrl + '&score1=' + this.score1 + '&counterUrl=' + roUrl + '&score2=' + this.score2
          mpvue.navigateTo({url})
        }
        if (_this.index < 6) {
          _this.index++
          _this.upload()
        }
        return true
      }
      _this.progress--
      _this.restTime = _this.progress / 10
      setTimeout(function () {
        _this._next()
      }, 100)
    },
    getRandomChoice () {
      var randomIndex = Math.random()
      randomIndex = parseInt(randomIndex * 10) % 3
      console.log('随机选择了' + randomIndex)
      this.counterChoice = this.list2[this.index].answer[randomIndex]
      if (randomIndex === this.list2[this.index].rightIndex) {
        console.log('选对了')
        this.counterIsTrue = true
        this.score2 += parseInt(Math.random() * 100 + 1)
        if (randomIndex === 0) {
          this.style1 = 'background-color:PaleGreen'
        }
        if (randomIndex === 1) {
          this.style2 = 'background-color:PaleGreen'
        }
        if (randomIndex === 2) {
          this.style3 = 'background-color:PaleGreen'
        }
        if (randomIndex === 3) {
          this.style4 = 'background-color:PaleGreen'
        }
      } else {
        console.log('选错了')
        if (randomIndex === 0) {
          this.style1 = 'background-color:red'
        }
        if (randomIndex === 1) {
          this.style2 = 'background-color:red'
        }
        if (randomIndex === 2) {
          this.style3 = 'background-color:red'
        }
        if (randomIndex === 3) {
          this.style4 = 'background-color:red'
        }
      }
    },
    sendFinish () {
      wx.sendSocketMessage({
        data: JSON.stringify(
          {
            'type': 'finish'
          }
        ),
        success: function (e) {
          console.log('对战结束')
        },
        fail: function (e) {
          console.log(e)
        }
      })
      wx.request({
        url: process.env.BASE_API + '/setScore',
        method: 'GET',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          avatarUrl: this.avatarUrl,
          nickName: this.nickName,
          score: this.score1
        },
        success: function (res) {
          console.log('发送了得分和头像')
        },
        fail: function (error) {
          console.log(error)
        }
      })
    }
    /*
    setting () {
      wx.request({
        url: 'http://203.195.239.100:10086/tiku/api/v1/',
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          operationId: 'queryCollection'
        },
        success: function (res) {
          console.log(res)
        },
        fail: function (error) {
          console.log(error)
        }
      })
    }
    */
  },
  onLoad: function (options) {
    console.log(options.avatarUrl)
    this.nickName = options.nickName
    this.avatarUrl = options.avatarUrl
    // this.setting()
  }
}
</script>

<style>
.battle{
    background: url("");
    background-size: 100% 100%;
    height:100%;
    width:100%;
    position: absolute;
}
.cu-btn{
  margin:20rpx;
}
.cu-btn.lg{
  height:100rpx;
  font-size: 50rpx;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
.score1{
    position:absolute;
    top:30px;
    left:10px;
    width: 75px;
    height:50px;
    color: aliceblue;
    text-align: center;
    font-size: 20px;
}
.score2{
    position:absolute;
    top:30px;
    right:10px;
    width: 75px;
    height:50px;
    color: aliceblue;
    text-align: center;
    font-size: 20px;
}
.page {
  margin-top: 40px;
  padding: 15px;
}
.weui-progress {
  margin-bottom: 25px;
}
.time{
    color: aliceblue;
    font-size: 20px;
    position: absolute;
    right: 20px
}
.userinfo-avatar {
  width: 100rpx;
  height:100rpx;
  margin: 0px;
  border-radius: 50%;
}
</style>
